import React, {Component} from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';

export default class ChatSubmit extends Component {
  /**
   * 绑定键盘的enter键
   */
  handleOnKeyDown = (event) => {
    if (event.keyCode === 13) {
      this.refs.submitTextarea.blur();
      this.props.sendChatMessage();
    }
  };

  render() {
  	return (
  	  <div style={styles.box}>
        <div style={styles.float}>
          <TextField
            fullWidth={true}
            multiLine={true}
            underlineShow={false}
            ref='submitTextarea'
            hintText="开始写下信息 ..."
            value={this.props.value}
            onChange={this.props.handleDetail.bind(this)}
            onKeyDown={this.handleOnKeyDown.bind(this)}
            hintStyle={styles.text}
            textareaStyle={styles.text}
          />
          <FloatingActionButton 
            zDepth={0}
            mini={true}
            style={styles.btn}
            iconClassName='icon-send'
            backgroundColor='#fff'
            iconStyle={{color: this.props.color500}}
            onTouchTap={this.props.sendChatMessage.bind(this)}
          />
        </div>
      </div>
  	);
  }
};

const styles = {
  box: {
    padding: 0,
    borderTopStyle: 'solid',
    borderTopColor: 'rgb(224, 224, 224)',
    borderTopWidth: 1,
  },
  float: {
    position: 'relative',
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 88,
  },
  text: {
    paddingTop: 12,
    paddingBottom: 12,
    paddingLeft: 24,
    paddingRight: 24,
  },
  btn: {
    position: 'absolute',
    top: 16,
    right: 24
  }
};
